<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>05事件修饰符</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
        <!-- 阻止事件冒泡；找父级 -->
        <!-- <div @click="sailing">
        <button @click.stop="sailing">第五集</button>
        </div> -->
        <!-- <a  @click.prevent="sailing" :href="url">跳去下一集</a> -->
        <!-- 阻止 默认事件--> 
        <!-- <form action="http://www.atguigu.com">
            <button @click.prevent="sailing2">第六集</button>
        </form> -->
        <!-- 事件只触发一次 -->
        <!-- <button @click.once="sailing3">第七集</button> -->
        <!-- 串联 -->
        <form :action="url" @click="sailing2">
        <button @click.prevent.stop="sailing" type="text">第八级</button>
        </form> 
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#demo',
            data: {
                url:"http://atguigu.com"
            },
            methods: {
                sailing(){
                    alert('路飞的过去！红发香克斯登场');
                    console.log(123)
                } ,
                sailing2(){
                    alert('恐怖 神秘的力量！海贼小丑巴基船长！')
                },
                sailing3(){
                    alert('绝体绝命！驯兽师摩奇VS路飞！')
                }
            }
        })
    </script>
</body>

</html>